<template>
  <component
    is="a-modal"
    v-model:visible="visible"
    :width="600"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close"
    @before-ok="submit"
  >
    <a-spin :loading="spinLoading" tip="加载中，请稍后···" style="margin:0 auto;width:100%;">
      <!-- 表单信息 start -->
      <a-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        :auto-label-width="true"
      >
        <a-form-item label="配置key" field="key">
          <a-input disabled v-model="formData.key" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="备注" field="message">
          <a-input v-model="formData.message" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="设置" field="value">
          <a-input v-model="formData.value" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="操作密码" field="admin_pay_password">
          <a-input-password
            v-model="formData.admin_pay_password"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="谷歌验证码" field="google_code">
          <a-input v-model="formData.google_code" placeholder="请输入" />
        </a-form-item>
      </a-form>
      <!-- 表单信息 end -->
    </a-spin>
  </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import systemApi from "@/api/system/system";
import SaTreeSlider from '@cps/sa-treeSlider/index.vue'
import { throttle } from "lodash";
const roleTree = ref([]);
const emit = defineEmits(["success"]);
// 引用定义
const formRef = ref();
const mode = ref("");
const visible = ref(false);
const loading = ref(false);
const spinLoading=ref(false)
let title = computed(() => {
  return "编辑"
});
// 表单信息
const formData = reactive({
  pay_ratio: "",
  message:'',
  admin_pay_password: "",
  google_code: "",
  value: "",
  id:'',
});

// 验证规则
const rules = ref({
  message: [{ required: true, message: "请输入" }],
  admin_pay_password: [{ required: true, message: "请输入" }],
  google_code: [{ required: true, message: "请输入" }],
  value: [{ required: true, message: "请输入" }],
});
// 打开弹框
const open = async (type = "add",data) => {
  visible.value = true;
  mode.value = type;
  formRef.value.resetFields();
  spinLoading.value=true
  if (type == "add") {
   
  }else{
    formData.id=data.id
    
  }
  spinLoading.value=false
};

// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key];
    }
  }
};

// 数据保存
const submit = throttle(async (done) => {
  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    try {
      let data = { ...formData };
      console.log('data',data);
      let result  = await systemApi.system_config_update(data);
      if (result.code === 200) {
        Message.success("操作成功");
        emit("success");
        visible.value = false
        done(true);
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false;
      }, 500);
    } catch {
      loading.value = false;
    }
  }
  done(false);
}, 100);

// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open, setFormData });
</script>
